<!--
 * @Description: 用户
 * @Author: zhailei
 * @Date: 2021-01-18 15:17:27
 * @LastEditTime: 2021-08-31 11:23:37
 * 
 * @FilePath: \vite-demoe:\wwwroot\Vue\\-cloud-vue\src\components\TopVUI\custom\userPopup.vue
-->
<template>
  <t-modal
    :title="$ct('systemSysQyweixinUser', '用户信息')"
    :width="1000"
    :visible="visible"
    wrapClassName="t-popup-modal"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-row :gutter="10">
      <a-col :md="10" :sm="24">
        <a-card :bordered="false">
          <div class="page-common-sub-box" style="height: 537px;">
            <data-grid
              ref="masterList"
              type="master"
              :columns="masterColumns"
              :url="url"
              rowKey="uuid"
              showPagination="auto"
              :scroll="scrollXY"
              @rowClick="
                (e) => {
                  masterRowClick(e, { classifyUuid: 'uuid' });
                }
              "
            >
            </data-grid>
          </div>
        </a-card>
      </a-col>
      <a-col :md="14" :sm="24">
        <a-card :bordered="false">
          <tool-bar
            @search="$refs.subList.refresh(true)"
            @reset="resetSearchForm"
          >
            <template slot="toolForm">
              <a-form-item :label="$ct('name', '名称')">
                <a-input
                  v-model="subQueryParam.templateName"
                  :placeholder="$ct('name', '名称')"
                />
              </a-form-item>
            </template>
          </tool-bar>
          <div class="page-common-sub-box">
            <data-grid
              ref="subList"
              type="sub"
              :url="url"
              :columns="subColumns"
              :queryParam="subQueryParam"
              rowKey="uuid"
              showPagination="auto"
              rowSelectionType="radio"
              :scroll="scrollXY"
            >
              <span
                slot="renderAction"
                slot-scope="{ text, record }"
                v-if="record.templateType === '自建'"
              >
                <a @click="handlePreview(record)">{{
                  $ct("preview", "预览")
                }}</a>
              </span>
            </data-grid>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <preview-modal ref="previewModal" :data="jsonData"></preview-modal>
  </t-modal>
</template>

<script>
import { DataGrid } from "@/components";
import previewModal from "@/components/TopVUI/k-portal-design/preview/index";

export default {
  components: {
    DataGrid,
    previewModal,
  },
  props: {
    visible: {
      type: Boolean,
    },
  },
  data() {
    return {
      mdl: null,
      // 查询参数
      queryParam: {},
      masterColumns: [
        {
          title: "分类名",
          align: "center",
          width: 120,
          dataIndex: "classifyName",
        },
        {
          title: "标识",
          align: "center",
          dataIndex: "classifyCode",
          langCode: "identification",
          sorter: true,
        },
      ],
      subColumns: [
        {
          title: "模板名称",
          dataIndex: "templateName",
        },
        {
          title: "模板类型",
          dataIndex: "templateType",
        },
        {
          title: "操作",
          align: "center",
          dataIndex: "action",
          width: 150,
          scopedSlots: {
            customRender: "renderAction",
          },
          fixed: "right",
        },
      ],
      orgTree: [],
      jsonData: {},
      url: {
        masterList: "/system/sysPortalClassify/getPageSet",
        subList: "/system/sysPortalTemplate/getPageSet",
        subDelete: "/system/sysPortalTemplate/deleteBatch",
        subAdd: "/system/sysPortalTemplate/save",
        subUpdate: "/system/sysPortalTemplate/update",
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam);
        return this.$post(this.url.getUserList, requestParameters).then(
          (res) => {
            delete this.queryParam.pageNo;
            return res;
          }
        );
      },
      masterRows: null,
      subQueryParam: {
        templateClassiftCode: "00",
      },
      subHeight: 0,
    };
  },
  computed: {
    scrollXY() {
      let subHeight = this.subHeight ? this.subHeight : 500;
      let height = subHeight - 40 - 40;
      return { y: height };
    },
  },
  filters: {},
  watch: {},
  created() {
    this.$nextTick(() => {
      this.subHeight = document.getElementsByClassName(
        "page-common-sub-box"
      )[0]?.clientHeight;
    });
  },
  methods: {
    masterRowClick(record, index, param) {
      this.masterRows = record;
      this.subQueryParam = { templateClassiftCode: record.classifyCode };
      this.$refs.subList.refresh();
    },
    handleSubmit() {
      if (!this.$refs.subList.selectedRowKeys.length) {
        return this.$message.warn("请勾选要授权的门户模板", 1.5);
      }
      let uuid = this.$refs.subList.selectedRows[0].uuid;
      let code = this.$refs.subList.selectedRows[0].templateClassiftCode;
      this.$emit("ok", uuid, code);
    },
    handleCancel() {
      this.$emit("cancel");
    },
    resetSearchForm() {
      this.subQueryParam = {
        templateClassiftCode: this.masterRows.classifyCode,
      };
      this.$refs.subList.refresh();
    },
    handlePreview(val) {
      this.$refs.previewModal.jsonData = val.templateJsonData
        ? JSON.parse(val.templateJsonData)
        : {};
      this.$refs.previewModal.visible = true;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.advanced-table {
  height: 100% !important;
}
</style>
